<!DOCTYPE HTML>
<html>
<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
  <title>Scrolling by pages with fixed-pos headers and footers</title>
  <style>
  .fp { position:fixed; left:0; width:100%; }
  .fp2 { position:fixed; left:0; width:100%; }
  </style>
</head>
<body onscroll="didScroll()" onload="test()">
<div class="fp" id="top" style="top:0; height:10px; background:yellow;"></div>
<div class="fp2" id="top2" style="top:10px; height:11px; background:blue;"></div>
<div class="fp" style="top:50%; height:7px; background:cyan;"></div>
<div class="fp2" id="bottom2" style="bottom:9px; height:12px; background:red;"></div>
<div class="fp" id="bottom" style="bottom:0; height:13px; background:yellow;"></div>
<p id="target">Something to click on to get focus
<div style="height:3000px;"></div>
<pre id="test">
<script class="testbody">
var SimpleTest = window.opener.SimpleTest;
var SpecialPowers = window.opener.SpecialPowers;
var is = window.opener.is;

function showElements(show, classname) {
  var elements = document.getElementsByClassName(classname);
  for (var i = 0; i < elements.length; ++i) {
    elements[i].style.display = show ? '' : 'none';
  }
}
function showFixedPosElements(show) {
  showElements(show, "fp");
}
function showFixedPosElements2(show) {
  showElements(show, "fp2");
}

var nextCont;
function didScroll() {
  var c = nextCont;
  nextCont = null;
  if (c) {
    c();
  }
}

function scrollDownOnePageWithContinuation(cont) {
  document.documentElement.scrollTop = 0;
  nextCont = cont;
  window.scrollByPages(1);
}

function test() {
  var smoothScrollPref = "general.smoothScroll";
  SpecialPowers.pushPrefEnv({"set":[[smoothScrollPref, false]]}, runTest);
}

function runTest() {
  showFixedPosElements(false);
  showFixedPosElements2(false);
  scrollDownOnePageWithContinuation(function() {
    var fullPageScrollDown = document.documentElement.scrollTop;

    showFixedPosElements(true);
    scrollDownOnePageWithContinuation(function() {
      var fullPageScrollDownWithHeaderAndFooter = document.documentElement.scrollTop;
      is(fullPageScrollDownWithHeaderAndFooter, fullPageScrollDown - (10 + 13),
         "Reduce scroll distance by size of small header and footer");

      document.getElementById("bottom").style.height = (window.innerHeight - 20) + "px";
      scrollDownOnePageWithContinuation(function() {
        is(document.documentElement.scrollTop, fullPageScrollDown - 10,
           "Ignore really big elements when reducing scroll size");   
        document.getElementById("bottom").style.height = "13px";

        document.getElementById("top").style.width = "100px";
        scrollDownOnePageWithContinuation(function() {
          is(document.documentElement.scrollTop, fullPageScrollDown - 13,
             "Ignore elements that don't span the entire viewport side");
          document.getElementById("top").style.width = "100%";

          showFixedPosElements2(true);
          scrollDownOnePageWithContinuation(function() {
            is(document.documentElement.scrollTop, fullPageScrollDown - (10 + 11 + 9 + 12),
               "Combine multiple overlapping elements");
            showFixedPosElements2(false);

            document.getElementById("top").style.width = "400px";
            scrollDownOnePageWithContinuation(function() {
              is(document.documentElement.scrollTop, fullPageScrollDown - (10 + 13),
                 "Don't ignore elements that span more than half the viewport side");
              document.getElementById("top").style.width = "100%";

              document.getElementById("top").style.top = "-40px";
              document.getElementById("top").style.transform = "translateY(38px)";
              scrollDownOnePageWithContinuation(function() {
                is(document.documentElement.scrollTop,
                   fullPageScrollDown - (10 + 13 - 40 + 38),
                   "Account for offset and transform");
                document.getElementById("top").style.width = "100%";

                // Scroll back up so test results are visible
                document.documentElement.scrollTop = 0;
                SimpleTest.finish();
                window.close();
              });
            });
          });
        });
      });
    });
  });
}
</script>
</pre>
</body>
</html>
